<template>
  <div class="container">
    <el-row class="section">
      <el-col :span="12" class="section-title">{{
        $t('channel_overview')
      }}</el-col>
      <el-col :span="12" class="section-toolbar">
        <el-button-group>
          <el-button
            :type="time == 'day' ? 'primary' : ''"
            size="small"
            @click="changeTime('day')"
            >{{ $t('day') }}</el-button
          >
          <el-button
            :type="time == 'week' ? 'primary' : ''"
            size="small"
            @click="changeTime('week')"
            >{{ $t('week') }}</el-button
          >
          <el-button
            :type="time == 'month' ? 'primary' : ''"
            size="small"
            @click="changeTime('month')"
            >{{ $t('month') }}</el-button
          >
        </el-button-group>
      </el-col>
    </el-row>
    <el-row>
      <el-card shadow="hover" class="section-card">
        <div slot="header">
          <span class="echart-title"
            >【{{ timeOpt[time] }}】
            {{ $t('chinese_channel_content_uv_ranking') }}
            ({{ $t('contents') }})
          </span>
          <br />
          <span class="echart-time"
            >{{ infoData.beginDate }} ~ {{ infoData.endDate }}
          </span>
        </div>
        <div id="channelZH" class="echart-body menu" />
      </el-card>
    </el-row>
    <el-row>
      <el-card shadow="hover" class="section-card">
        <div slot="header">
          <span class="echart-title"
            >【{{ timeOpt[time] }}】
            {{ $t('khmer_channel_content_uv_ranking') }}
            ({{ $t('contents') }})
          </span>
          <br />
          <span class="echart-time"
            >{{ infoData.beginDate }} ~ {{ infoData.endDate }}
          </span>
        </div>
        <div id="channelKM" class="echart-body" />
      </el-card>
    </el-row>
  </div>
</template>
<script>
import echarts from 'echarts';
import '@/assets/css/common/style.scss';
import { newsChannelApi } from '@/api/data-overview.js';

export default {
  data() {
    return {
      time: 'day',
      ChennalRead: [
        {
          id: 'channelZH',
          color: '#E6A23C'
        },
        {
          id: 'channelKM',
          color: '#3398DB'
        }
      ],
      infoData: {},
      timeOpt: {
        day: this.$t('yesterday'),
        week: this.$t('last_week'),
        month: this.$t('last_month')
      }
    };
  },

  computed: {
    isOpenMenu() {
      return this.$store.state.app.sidebar.opened; // 监听菜单是否展开
    }
  },

  watch: {
    isOpenMenu(newVal) {
      if (newVal) {
        document.getElementById('channelZH').classList.add('menu-open');
        document.getElementById('channelKM').classList.add('menu-open');
        setTimeout(() => {
          this.ChennalRead.forEach(item => {
            item[`${item.id}Echart`].resize();
          });
        }, 500);
      } else {
        document.getElementById('channelZH').classList.remove('menu-open');
        document.getElementById('channelKM').classList.remove('menu-open');
      }
    }
  },

  mounted() {
    this.initChennalReadEchart();
    window.addEventListener('resize', () => {
      this.ChennalRead.forEach(item => {
        item[`${item.id}Echart`].resize();
      });
    });
  },

  methods: {
    changeTime(type) {
      this.time = type;
      this.getChennalReadData();
    },
    initChennalReadEchart() {
      this.ChennalRead.forEach(item => {
        item[`${item.id}Echart`] = echarts.init(
          document.getElementById(item.id)
        );
        item[`${item.id}Echart`].showLoading();
        this.getChennalReadData();
      });
    },
    getChennalReadData() {
      newsChannelApi({ time: this.time })
        .then(result => {
          if (result.code == 200) {
            this.infoData = result.data;
            this.ChennalRead.forEach(item => {
              item.chennalNameList = result.data[item.id].map(
                item => item.channelName
              );
              item.count = result.data[item.id].map(item => item.total);
              item[`${item.id}Echart`].setOption(
                this.setOption(item.chennalNameList, item.count, item.color)
              );
              item[`${item.id}Echart`].hideLoading();
            });
          } else {
            this.ChennalRead.forEach(item => {
              item[`${item.id}Echart`].hideLoading();
            });
          }
        })
        .catch(() => {
          this.ChennalRead.forEach(item => {
            item[`${item.id}Echart`].hideLoading();
          });
        });
    },
    setOption(xAxis, value) {
      return {
        color: this.$store.state.app.eChartColor,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xAxis,
            axisLabel: {
              // 坐标轴刻度标签的相关设置。
              interval: 0,
              rotate: xAxis.length > 5 ? '-20' : '0'
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: this.$t('reading'),
            type: 'bar',
            barWidth: '60%',
            data: value
          }
        ]
      };
    }
  }
};
</script>
